<template>
	<view class="content">
		<!-- 顶部标签组件 -->
		<view class="safeContent">
			<topCom>{{title}}</topCom>
		</view>
		<view class="headshot">
			<view class="headshotIcon">
			</view>
		</view>
		<view class="storeInfo">
			<view class="item">
				<view class="itemTitle">店铺名称</view>
				<input v-model="shopName" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">服务商类型</view>
				<button class="Buy_now">
				</button>
			</view>
			<view class="item">
				<view class="itemTitle">月交易量级</view>
				<input v-model="monthVal" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">邮箱联系方式</view>
				<input v-model="mailbox" type="text" class="itemVal">
			</view>
			<view class="item">
				<view class="itemTitle">店铺简介</view>
				<textarea v-model="introduction" auto-height="true" class="txts itemVal"></textarea>
			</view>
		</view>
		<view class="footer">
			<button class="btns" @click="tabled">
				提交申请
			</button>
		</view>
		<!--  缴纳保证金  -->
		<PaymentSuccess :statePay="Payment" @closePaySuccess="closePaySuccess()">
			<template v-slot:title>
				<view class="ejectTitle">
					<span>缴纳保证金</span>
					<img @click='closePaySuccess()' src='../../static/images/Home/no.png' class="no" />
				</view>
			</template>
			<template v-slot:cont>
				<view class="ejectCont">
					<view class="paymentList">
						<view class="item">
							<view class="itemName">
								缴纳数量
							</view>
							<view class="itemVal">
								2000USDT
							</view>
						</view>
						<view class="item">
							<view class="itemName">
								交易方式
							</view>
							<view class="itemVal">
								USDT账户
							</view>
						</view>
						<view class="item">
							<view class="itemName">
								余额
							</view>
							<view class="itemVal">
								20000USDT
							</view>
						</view>
					</view>
				</view>
				<view class="ejectBottom">
					<button @click="sure">确认支付</button>
				</view>
			</template>
		</PaymentSuccess>
		<!-- 确认支付密码 -->
		<PaymentSuccess :statePay="password" @closePaySuccess="closePaySuccess()">
			<template v-slot:title>
				<view class="ejectTitle">
					<span>输入密码</span>
					<img @click='closePaySuccess()' src='../../static/images/Home/no.png' class="no" />
				</view>
			</template>
			<template v-slot:cont>
				<view class="ejectCont">
					<view class="passWord">
						<view class="title">安全密码</view>
						<input class="vals" v-model="pwd" type="text" password="false" />
						<view class="tips">忘记密码？</view>
					</view>
				</view>
				<view class="ejectBottom">
					<button @click="ConfirmPwd">确认支付</button>
				</view>
			</template>
		</PaymentSuccess>
		<!-- 审核中 -->
		<PaymentSuccess :statePay="styles" @closePaySuccess="closePaySuccess()">
			<template v-slot:title>
				<view class="ejectTitle noBorder">
					<span></span>
					<img @click='closePaySuccess()' src='../../static/images/Home/no.png' class="no" />
				</view>
			</template>
			<template v-slot:cont>
				<view class="ejectCont">
					<image class="styleImgs" src="../../static/images/Home/homeSom/clock-if.png" mode=""></image>
					<view class="styles">
						审核中
					</view>
					<view class="info">
						平台正在处理您的锦鲤服务商申请，预计<span class="highlight">72h</span>内完成审核，届时请查看结果。有任何问题请联系客服
					</view>
					<view class="btns">
						<button class="customer">联系客服</button>
						<button class="back" @click="GoIndex">返回首页</button>
					</view>
				</view>
			</template>
		</PaymentSuccess>

	</view>
</template>

<script lang="ts" setup>
	import topCom from '../topCom/index.vue'
	import { postLoginAPI } from '@/api/filedProvider'
	import { ref } from 'vue'
	import { showNotify } from 'vant';
	import PaymentSuccess from '../eject/eject.vue';
	const title = ref('申请成为服务商')
	// 店铺名称
	const shopName = ref('1')
	// 月交易
	const monthVal = ref('1')
	const mailbox = ref('1')
	const introduction = ref('')
	const Payment = ref(false)
	const password = ref(false)
	const styles = ref(false)
	const resVal = ref()
	const pwd = ref('')
	// 服务商信息
	const providerInfo = ref({
		serName: "TTTT",
		serLogo: "3333",
		serType: "1",
		serTradeLevel: "1",
		unSerNode: "1",
		email: "1111@qq.com",
		introduction: "sadasda",
		payPassword: "123456"
	})
	const GoIndex = () => {
		uni.navigateTo({
			url: '/pages/index/index'
		})
	}
	function closePaySuccess(date : any) {
		Payment.value = false
		password.value = false
		styles.value = false
	}
	function sure() {
		Payment.value = false
		password.value = true
	}
	function ConfirmPwd() {
		Payment.value = false
		password.value = false
		if (pwd.value === "123456") {
			postLoginAPI(resVal.value)
			styles.value = true
		} else if (pwd.value === '') {
			showNotify({ type: 'danger', message: '密码不能为空' })
		} else {
			showNotify({ type: 'danger', message: '密码错误为123456' })
		}
	}
	function tabled() {
		console.log(shopName.value === '')
		if (shopName.value != '' && monthVal.value != '' && mailbox.value != '' && introduction.value != '') {
			Payment.value = true
		} else {
			showNotify({ type: 'danger', message: '请填写所有信息' })
		}
	}
</script>

<style lang="scss" scoped>
	@property --direc {
		syntax: '<angle>';
		inherits: false;
		initial-value: 0deg;
	}

	.Buy_now {
		width: 200px;
		height: 88px;
		color: #fff;
		margin-left: 0;
		// text-align: center;
		--direc: 0deg;
		background-image: linear-gradient(var(--direc), #99F5DA, #83AAE1, #6953E9, #A82DC0);
		animation: rotate 3s linear infinite;
		border-radius: 16px;
	}

	.Buy_now::before {
		content: '';
		position: absolute;
		inset: 4px;
		background-color: #000001;
		border-radius: inherit;
	}

	.Buy_now::after {
		content: 'USDT服务商';
		font-size: 50px;
		position: absolute;
		inset: 4px;
		z-index: 1;
		// margin-top: 10px;
		// top: 50%;
		// transform: rotateY(-50%);
		line-height: 88px;
	}

	@keyframes rotate {
		to {
			--direc: 360deg
		}
	}

	.ejectTitle {
		position: relative;
		height: 98px;
		background-color: rgba(34, 35, 36, 1);
		text-align: center;
		margin-left: 32px;
		margin-right: 32px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);

		&.noBorder {
			border-width: 0;
		}

		span {
			height: 48px;
			font-size: 40px;
			font-family: MicrosoftYaHei;
			color: #FFFFFF;
			line-height: 98px;
		}

		img {
			position: absolute;
			width: 72px;
			top: 50%;
			right: 0;
			transform: translateY(-50%);
		}
	}

	.ejectCont {
		padding-top: 62px;
		padding-bottom: 58px;

		.styleImgs {
			display: block;
			width: 178px;
			height: 178px;
			margin: 0 auto;
		}

		>.styles {
			margin-top: 56px;
			margin-bottom: 24px;
			text-align: center;
			padding-right: 32px;
			padding-left: 32px;
			height: 56px;
			font-size: 40px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			line-height: 56px;
			letter-spacing: 1px;
		}

		.info {
			padding-right: 32px;
			padding-left: 32px;
			margin-bottom: 40px;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 40px;

			.highlight {
				color: rgba(0, 208, 185, 1);
			}
		}

		.btns {
			display: flex;
			flex-direction: row;
			justify-content: space-evenly;

			button {
				margin: 0;
			}

			.customer {
				width: 216px;
				height: 72px;
				border-radius: 16px;
				border: 2px solid #00D0B9;
				font-weight: 400;
				font-size: 28px;
				line-height: 68px;
				background-color: transparent;
				box-sizing: border-box;
				color: #00D0B9;
			}

			.back {
				width: 216px;
				height: 72px;
				border-radius: 16px;
				background-color: #00D0B9;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28px;
				color: #000000;
				line-height: 72px;
			}
		}

		.passWord {
			display: flex;
			padding: 24px 32px 190px 32px;
			flex-direction: column;

			.title {
				width: 100%;
				height: 33px;
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 33px;
				margin-bottom: 16px;
			}

			.vals {
				width: calc(100% - 60px);
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;

				color: #FFFFFF;
				line-height: 40px;
				letter-spacing: 1px;
				padding-left: 32px;
				padding-right: 28px;
				height: 88px;
				background: rgba(255, 255, 255, 0.1);
				border-radius: 16px;
				border: 2px solid rgba(255, 255, 255, 0.6);
			}

			.tips {
				margin-top: 16px;
				text-align: right;
				width: 100%;
				height: 33px;
				font-size: 24px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #E4434C;
				line-height: 33px;
				text-decoration: underline;
			}
		}

		.paymentList {
			padding: 0 32px;

			.item {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				width: 100%;
				height: 80px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 80px;
				letter-spacing: 1px;

				.itemName {}

				.itemVal {}
			}
		}
	}

	.ejectBottom {
		background: #121317;
		padding: 16px 0;

		button {
			margin: 0 auto;
			width: 280px;
			height: 80px;
			background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
			border-radius: 16px;
			font-weight: 600;
			font-size: 28px;
			font-family: PingFangSC, PingFang SC;
			color: #000000;
			line-height: 80px;
		}
	}

	.content {
		min-height: 100vh;

		.headshot {
			width: 160px;
			height: 160px;
			border-radius: 50%;
			background: rgba(255, 255, 255, 0.2);
			border: 2px solid rgba(255, 255, 255, 0.4);
			margin: 40px auto;
			position: relative;

			.headshotIcon {
				width: 48px;
				height: 48px;
				background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
				border-radius: 50%;
				position: absolute;
				bottom: -1px;
				right: -1px;
			}
		}

		.storeInfo {

			>.item {
				padding-left: 32px;
				padding-right: 32px;
				display: flex;
				flex-direction: column;
				margin-bottom: 40px;

				.itemTitle {
					width: calc(100% - 64px);
					font-size: 24px;
					font-family: PingFangSC, PingFang SC;
					color: #FFFFFF;
					line-height: 33px;
					margin-bottom: 16px;
				}

				.itemVal {
					width: calc(100% - 64px);
					min-height: 88px;
					// height: auto;
					background: rgba(255, 255, 255, 0.1);
					border-radius: 16px;
					border: 2px solid rgba(255, 255, 255, 0.6);
					padding-left: 32px;
					padding-right: 32px;
					font-size: 28px;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 40px;
					letter-spacing: 1px;
				}

				.txts {
					padding-top: 24px;
					padding-bottom: 24px;
					min-height: 120px;
					height: auto;
					word-wrap: break-word;
				}

				// ::v-deep.uni-textarea-wrapper {
				// 	height: auto;
				// }

				// ::v-deep .uni-textarea-textarea {
				// 	background-color: red;
				// 	min-height: auto;
				// }
			}
		}

		.footer {
			margin-top: 110px;
			width: 100%;
			height: 168px;
			background: rgb(0, 0, 0);
			// position: fixed;
			// left: 0;
			// bottom: 0;
			position: relative;

			.btns {
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translateX(-50%);
				width: 327px;
				height: 88px;
				background: linear-gradient(151deg, #06FFDD 0%, #4E47FF 100%);
				border-radius: 16px;
				font-size: 28px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				color: #000000;
				line-height: 88px;
			}
		}
	}
</style>